import { Button, message, Table } from "antd"
import { PrinterOutlined } from '@ant-design/icons';
import { getPrinter } from '@/utils/storage'
import styles from './index.less'
import { useEffect } from "react";
import { useState } from "react";

const Home = () => {

  const { ipcRenderer, files } = window.electron
  const [currentPrinter, setCurrentPrinter] = useState('')
  const [waitPrints, setWaitPrints] = useState([])

  files.onWait((waits) => {
    setWaitPrints(waits)
  })

  useEffect(() => {
    const pstr = getPrinter()
    if (pstr) {
      const printer = JSON.parse(pstr)
      setCurrentPrinter(printer.name)
    }
  }, [])

  ipcRenderer.receive('node-server', async (args) => {
    console.log('node-server receive');
  })

  const print = () => {
    if (!currentPrinter) {
      message.error('Please select printer')
      return
    }
    ipcRenderer.send('xmf-print', {
      silent: true,
      printBackground: true,
      deviceName: currentPrinter,
    })
  }

  const printToPDF = () => {
    ipcRenderer.send('xmf-print-pdf', {
      silent: true,
      printBackground: true,
      deviceName: currentPrinter,
    })
  }

  const columns = [
    {
      title: 'File',
      dataIndex: 'image',
      key: 'image',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Create Time',
      dataIndex: 'createTime',
      key: 'createTime',
    }
  ]

  return (
    <div className={styles.container}>
      <Table columns={columns} rowKey="createTime" dataSource={waitPrints} pagination={false} />
      <Button type="primary"
        size="large"
        style={{ marginTop: '20px' }}
        icon={<PrinterOutlined />}
        onClick={() => {
          print()
          // printToPDF()
        }}>Print</Button>
    </div>
  )

}

export default Home
